<template>
  <div style="padding-bottom: 20px">
    <el-form ref="form" :model="form" size="small" label-width="80px">
      <div class="item" v-for="(item, index) in form.list" :key="index">
        <el-row>
          <el-col :xs="20" :sm="12" :lg="8">
            <el-form-item label="条件名称" :prop="'list.' + index + '.name'" :rules="rules.name">
              <el-input v-model.trim="item.name" placeholder="请输入条件名称" :maxlength="255" />
            </el-form-item>
          </el-col>
          <el-col :xs="4" :sm="12" :lg="8" style="padding-left: 10px">
            <el-button plain circle size="mini" icon="el-icon-plus" @click="addItem" v-if="index + 1 >= form.list.length" />
            <el-button plain circle size="mini" icon="el-icon-delete" @click="form.list.splice(index, 1)" v-else />
          </el-col>
        </el-row>
        <el-row>
          <el-col :sm="12" :lg="8">
            <el-form-item label="规则类型" :prop="'list.' + index + '.ruleType'" :rules="rules.ruleType">
              <el-select v-model="item.ruleType" placeholder="请选择" default-first-option filterable style="width: 100%">
                <el-option v-for="dict in ruleTypes" :key="dict.value" :label="dict.label" :value="+dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :sm="12" :lg="8">
            <el-form-item label="量词单位" :prop="'list.' + index + '.ruleUnit'" :rules="rules.ruleUnit">
              <el-input v-model.trim="item.ruleUnit" placeholder="请输入量词单位" :maxlength="50" />
            </el-form-item>
          </el-col>
        </el-row>
        <RdcRuleType :ref="'RdcRuleType' + index" v-model="item.ruleJson" :rule-type="item.ruleType" />
      </div>
    </el-form>
  </div>
</template>
<script>
// 条件条款
import { nameRule } from '@/utils/validate'
import RdcRuleMixin from './mixin'
import RdcRuleType from './RdcRuleType1to4'
export default {
  components: { RdcRuleType },
  mixins: [RdcRuleMixin],
  dicts: ['cq_rule_type'],
  data() {
    return {
      initItem: {
        name: '',
        ruleUnit: '处',
        ruleType: '',
        ruleJson: ''
      },
      rules: {
        name: [{ required: true, message: '请输入条件名称' }, nameRule],
        ruleUnit: [{ required: true, message: '请输入量词单位' }],
        ruleType: [{ required: true, message: '请选择抽检规则类型' }]
      },
      ruleTypes: []
    }
  },
  watch: {
    'dict.type.cq_rule_type'(val) {
      if (!val?.length) return
      this.ruleTypes = val.filter(i => ['1', '2', '3', '4'].includes(i.value))
    }
  },
  methods: {
    async validate() {
      const list = this.form.list
      const valid = await this.$refs.form.validate().catch(() => false)
      if (!valid) return false

      for (let i = 0; i < list.length; i++) {
        const name = 'RdcRuleType' + i
        const ref = this.$refs[name]?.[0] || this.$refs[name]
        const valid = await ref?.validate().catch(() => false)
        if (!valid) return false
      }

      this.$emit('input', JSON.stringify(list))
      return true
    }
  }
}
</script>
<style lang="scss" scoped>
.item {
  background-color: rgba(#eef1f6, 0.5);
  border-radius: 8px;
  padding: 10px;
  + .item {
    margin-top: 10px;
  }
}
</style>
